<template>
  <div class="ladder_goods_area" v-if="dataSoures">
    <van-list
      :loading.sync="loading"
      class="van_list"
      :finished="finished"
      finished-text="没有更多商品信息了"
      :immediate-check="false"
      @load="load"
    >
      <div class="item_block" v-for="(item, index) of dataSoures" :key="index">
        <!-- //119当天样式、 -->
        <!-- <div class='box' v-if="is119" @click="goToDetail(item)">
          <img v-if="item.tieredPricingRules&&item.tieredPricingRules[0].priceCeil==0&&item.tieredPricingRules[0].priceFloor==0" src="https://image.hezongyy.com/pcimage/119h5/app_ladder.png"
            alt="" />
          <img v-else src="https://image.hezongyy.com/pcimage/119h5/active_ladder.png" alt="" />
          <div class='box_price1'>
            <div class='tip' v-if="item.sellingPrice!=-1">￥</div>
            <div class='price' v-html="getSellingPrice(setPrice.setPriceNoTip(item.sellingPrice))"></div>
          </div>
        </div> -->
        <!-- <div class='box' v-if="!is119&&!isPreview">
          <img src="https://image.hezongyy.com/pcimage/20211109img/jtj_h5_119jx.png" alt="" /> 
          <div class='box_price1'>119精选</div> 
        </div> -->
        <!-- 预览时候样式 -->
        <div class="box" @click.stop="goToDetail(item)">
          <div class="advertTag">
            <img v-show="item.onSalePictureURL" :src="item.onSalePictureURL" />
          </div>
          <div  v-if="item.giftExists == 1">
            <img
              class="imgbom"
              v-show="item.giftType == 0 && item.isPreviewGift == 0"
              src="https://image.hezongyy.com/pcimage/119h5/appH5_mzz.png"
              alt=""
            />
            
            <img
              class="imgbom"
              v-show="item.giftType == 1 && item.isPreviewGift == 0"
              src="https://image.hezongyy.com/pcimage/119h5/appH5_huangou.png"
              alt=""
            />
            <img
              class="imgbom"
              v-show="item.giftType == 0 && item.isPreviewGift == 1"
              src="https://image.hezongyy.com/pcimage/119h5/appH5_yuGaomz.png"
              alt=""
            />
            <img
              class="imgbom"
              v-show="item.giftType == 1 && item.isPreviewGift == 1"
              src="https://image.hezongyy.com/pcimage/119h5/appH5_yuGaohg.png"
              alt=""
            />
            <div
              v-show="item.giftType == 0 && item.isPreviewGift == 0"
              class="box_price1"
            >
              <!-- <div class="boxPrice1Left font12">买赠</div> -->
            </div>
            <div
              v-show="item.giftType == 1 && item.isPreviewGift == 0"
              class="box_price1"
            >
              <div class="boxPrice1Left">
                <!-- <span class="font12">换购价</span> -->
              </div>
              <div class="boxPrice1Right" v-if="item.giftPrice != 0">
                <span class="font8">￥</span>
                <span class="font13">{{
                  (item.giftPrice.toFixed(2) + "").split(".")[0]
                }}</span>
                <span class="font13"
                  >.{{ (item.giftPrice.toFixed(2) + "").split(".")[0] }}</span
                >
              </div>
            </div>
            <!-- <img
            v-show="item.isSwap == 4 && item.isPreviewGift == 1"
            src="https://image.hezongyy.com/pcimage/119h5/app_mz.png"
            alt=""
           /> -->
           <div
            v-show="item.isSwap == 4 && item.isPreviewGift == 1"
            class="box_price1"
           >
            <div class="boxPrice1Left">
              <!-- <span class="font16">预告</span>
              <div>买赠</div> -->
            </div>
            <div class="boxPrice1Right">{{ item.giftDesc }}</div>
           </div>

            <div
              v-show="item.giftType == 1 && item.isPreviewGift == 1"
              class="box_price1"
            >
              <div class="boxPrice1Left">
                <!-- <span class="font12 tex">预告</span>
                <span class="font12" style="margin-top: -2px">换购价</span> -->
              </div>
              <div class="boxPrice1Right" v-if="item.giftPrice != 0">
                <span class="font8">￥</span>
                <span class="font13">{{
                  (item.giftPrice.toFixed(2) + "").split(".")[0]
                }}</span>
                <span class="font13"
                  >.{{ (item.giftPrice.toFixed(2) + "").split(".")[0] }}</span
                >
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="box_price">
          <div class="tip" >￥</div>
          <div
            class="price"
            v-html="getSellingPrice(setPrice.setPriceNoTip(item.sellingPrice))"
          ></div>
        </div> -->
        <div class="left">
          <img
            :src="
              item.picture
                ? item.picture
                : 'https://image.hezongyy.com/pcimage/collage2022/zhuanQu_2022_pcSmall.jpg'
            "
          />
          <img
            class="tip"
            v-if="item.quantity <= 0"
            src="https://image.hezongyy.com/pcimage/119h5/ysq.png"
          />
          <div class="jiaG" v-show="item.isUserShoppingCart == 1">
            此商品已加购
          </div>
        </div>
        <div class="right">
          <div class="right_text" @click.stop="goToDetail(item)">
            <div class="text1">
              <span class="nameTge" v-show="item.label.find((e) => e.id == 6)"
                >精</span
              >
              <span class="nameTge" v-show="item.label.find((e) => e.id == 24)"
                >院</span
              >
              <span class="rightName">{{ item.name }}</span>
            </div>
            <div class="flex-item">
              <span class="gjm" v-for="(e, index) in item.label" :key="index">
                <span class="tag" v-show="e.id == 1">特卖</span>
                <span class="tag" v-show="e.id == 26 && item.priceType == 2"
                  >新人专享</span
                >
                <span class="tag" v-show="e.id == 22 && item.priceType == 3"
                  >首购优惠</span
                >
                <span
                  class="tag"
                  v-show="
                    e.id == 10 && item.priceType != 2 && item.priceType != 3
                  "
                  >特价</span
                >
                <span
                  class="tag"
                  v-show="
                    e.id == 17 && item.priceType != 2 && item.priceType != 3
                  "
                  >换</span
                >
                <span
                  class="tag"
                  v-show="
                    e.id == 4 && item.priceType != 2 && item.priceType != 3
                  "
                  >赠</span
                >
              </span>
              <span
                class="tag"
                v-show="
                  item.coupon == 1 && item.priceType != 2 && item.priceType != 3
                "
                >券</span
              >
              <span class="gjm" v-show="item.nationalDrugCode">
                <span class="tagR">国家码</span>
              </span>
              <span class="tagR" v-show="item.label.find((e) => e.id == 21)">
                集
              </span>
              <span class="tagR" v-show="item.label.find((e) => e.id == 8)">
                盟
              </span>
            </div>
            <div
              class="label_img"
              v-for="(labelId, index) of item.label"
              :key="index"
              v-show="getLabelImg(labelId)"
            >
              <img class="img1" :src="getLabelImg(labelId)" />
            </div>
            <div class="text2">{{ item.licenseNumber }}</div>
            <div class="text2">{{ item.specification }}</div>
            <div class="text2">{{ item.manufacturerName }}</div>
            <div class="text2">效期：{{ item.expirationDate }}</div>
          </div>

          <!-- 119  7号8号样式 -->
          <!-- <div>
            <div class="text31">
              <span class="zxj119">119专享价</span>
              <span class="num">
                {{ setPrice.setPrice(item.sellingPrice) }}</span
              >
              <span class="num1" v-show="item.sellingPrice != -1"
                >¥{{ item.retailPrice }}</span
              >
              <span class="btn">
                <img
                  v-if="item.sellingPrice == -1 || item.quantity <= 0"
                  src="@/assets/image/jiagou1.png"
                />
                <img
                  v-else
                  @click="showCards(item)"
                  src="@/assets/image/jiagou.png"
                />
              </span>
            </div>
            <div
              class="couponAfterPrice1"
              v-if="
                item.sellingPrice != -1 &&
                item.onSaleTieredPriceList[0] &&
                item.onSaleTieredPriceList[0].priceFloor > 0 &&
                item.onSaleTieredPriceList[0].priceCeil > 0
              "
            >
              券后 {{ "¥" + item.onSaleTieredPriceList[0].priceFloor }}-{{
                "¥" + item.onSaleTieredPriceList[0].priceCeil
              }}
            </div>
            <div
              class="couponAfterPrice1"
              v-if="
                item.sellingPrice != -1 &&
                item.onSaleTieredPriceList[0] &&
                item.onSaleTieredPriceList[0].priceFloor == 0 &&
                item.onSaleTieredPriceList[0].priceCeil > 0
              "
            >
              券后{{ "¥" + item.onSaleTieredPriceList[0].priceCeil }}
            </div>
          </div> -->
          <div>
            <div class="text31">
              <div v-if="item.priceType == 7">
                <div class="teNum">
                  <span class="num1">
                    <span v-if="item.sellingPrice > 0">
                      <!-- <span class="dolTeg fonts12">特卖价</span> -->
                      <span class="fonts12">￥</span>
                      <span class="font16">{{ item.sellingPrice }}</span>
                    </span>
                    <span
                      class="num font16-w"
                      v-else-if="item.sellingPrice == -1"
                      >加盟可见</span
                    >
                    <span class="num font16-w" v-else>定价中</span>
                  </span>
                </div>
              </div>
              <div v-else>
                <div class="teNum">
                  <span
                    class="num"
                    v-if="
                      item.priceType > 0 &&
                      item.priceType <= 6 &&
                      item.priceType != 4 &&
                      item.priceType != 5 &&
                      item.coupon == 0 &&
                      item.sellingPrice != -2 
                    "
                  >
                    <span class="fonts12">
                      {{
                        setPrice
                          .setPrice(item.sellingPrice, item.priceType)
                          .split("￥")[0]
                      }}
                    </span>
                    <span
                      v-show="item.sellingPrice > 0 && item.sellingPrice != -1"
                      class="dolTeg fonts12"
                      >￥</span
                    >
                    <span
                      :class="{
                        font16w: item.priceType == 1 || item.priceType == 6,
                        font16: true,
                      }"
                      v-if="
                        setPrice
                          .setPrice(item.sellingPrice, item.priceType)
                          .split('￥')[0] != '定价中' &&
                        setPrice
                          .setPrice(item.sellingPrice, item.priceType)
                          .split('￥')[0] != '加盟可见'
                      "
                    >
                      {{
                        setPrice
                          .setPrice(item.sellingPrice, item.priceType)
                          .split("￥")[1]
                      }}</span
                    ></span
                  >
                  <span
                    class="num1"
                    v-else-if="
                      (item.priceType == 4 || item.priceType == 5)
                    "
                  >
                    <span class="dolTeg fonts12">活动价</span>
                    <span class="fonts12">￥</span>
                    <span class="font16">{{item.sellingPrice == -2 ? item.tieredSellingPrice :  item.sellingPrice }}</span>
                  </span>

                  <!-- <span class="num1" v-show="item.sellingPrice > 0"
                  >{{ item.priceType }}￥{{ item.sellingPrice }}</span
                > -->
                  <span class="num font16-w" v-else-if="item.sellingPrice == -1"
                    >加盟可见</span
                  >
                  <span class="num font16-w" v-else-if="item.sellingPrice == 0"
                    >定价中</span
                  >
                  <span
                    class="num5 font14"
                    v-if="
                      item.retailPrice > 0 &&
                      item.sellingPrice != -1 &&
                      item.sellingPrice != 0 &&
                      item.sellingPrice == item.retailPrice &&
                      item.coupon == 1
                    "
                    >￥{{ item.retailPrice }}</span
                  >
                  <span
                    class="num3 font14 color333"
                    v-if="
                      item.retailPrice > 0 &&
                      item.sellingPrice != -1 &&
                      item.sellingPrice != 0 &&
                      item.sellingPrice != item.retailPrice &&
                      item.sellingPrice != -2
                    "
                    >￥{{ item.retailPrice }}</span
                  >
                </div>
                <div class="vipFlex">
                  <span
                    class="num2"
                    v-show="
                      item.priceType != 2 &&
                      item.priceType != 3 &&
                      item.fistClassPrice > 0 &&
                      item.fistClassVisible == 1
                    "
                    ><span class="fw500"
                      ><span class="font14">￥</span
                      ><span class="font16">{{
                        item.fistClassCoupon == 1
                          ? item.fistClassFloorPrice.toFixed(2)
                          : item.fistClassPrice.toFixed(2)
                      }}</span><span class="fonts12">起</span>
                    </span>
                    <img
                      src="https://image.hezongyy.com/pcimage/119h5/app_vip.png"
                      alt=""
                  /></span>
                  <span
                    class="num1"
                    v-if="
                      item.coupon == 1 &&
                      item.priceType != 2 &&
                      item.priceType != 3 &&
                      item.couponFloorPrice > 0
                    "
                  >
                  
                    <span class="dolTeg fonts12">券后</span>
                    <span class="fonts12">￥</span>
                    <span class="font14">{{ item.couponFloorPrice }}</span>
                    <span class="fonts12"> 起 </span>
                  </span>
                </div>
                <div
                  class="num4"
                  v-show="
                    item.previewOnSaleexists == 1 &&
                    item.previewOnSaleStartType == 2
                  "
                >
                  <div class="priceBtmLeft">预览</div>
                  <div class="priceBtmRight">
                    <span class="priceBtmSpanLeft">{{
                      item.previewOnSalePrice == -3
                        ? "￥待揭晓"
                        : `￥${item.previewOnSalePrice}`
                    }}</span>
                    <span
                      class="priceBtmSpanRight"
                      v-show="item.previewPriceReviewStartTimeTow"
                      >{{ item.previewPriceReviewStartTimeTow }}开始</span
                    >
                  </div>
                </div>
              </div>
              <span class="btn">
                <img
                  v-if="item.sellingPrice == -1 || item.quantity <= 0"
                  src="@/assets/image/jiagou1.png"
                />
                <img
                  v-else
                  @click="showCards(item)"
                  src="@/assets/image/jiagou.png"
                />
              </span>
            </div>
            <!-- <div class="couponAfterPrice1" v-if="
                item.sellingPrice != -1 &&
                  item.onSaleTieredPriceList[0] &&
                  item.onSaleTieredPriceList[0].priceFloor > 0 &&
                  item.onSaleTieredPriceList[0].priceCeil > 0
              ">
              券后 {{ "¥" + item.onSaleTieredPriceList[0].priceFloor }}-{{
                "¥" + item.onSaleTieredPriceList[0].priceCeil
              }}
            </div>
            <div class="couponAfterPrice1" v-if="
                item.sellingPrice != -1 &&
                  item.onSaleTieredPriceList[0] &&
                  item.onSaleTieredPriceList[0].priceFloor == 0 &&
                  item.onSaleTieredPriceList[0].priceCeil > 0
              ">
              券后{{ "¥" + item.onSaleTieredPriceList[0].priceCeil }}
            </div> -->
          </div>
          <!-- //119当天样式 -->
          <!-- <div class="text3" v-else>
            <span class="num">{{ setPrice.setPrice(item.sellingPrice) }}</span>
            <span class="num1" v-show="item.sellingPrice != -1">¥{{ item.retailPrice }}</span>
            <span class="btn">
              <img v-if="item.sellingPrice==-1||item.quantity <= 0" src="@/assets/image/jiagou1.png" />
              <img v-else @click="showCards(item)" src="@/assets/image/jiagou.png" />
            </span>
            <div class="couponAfterPrice" v-if="
                item.sellingPrice != -1 &&
                  item.onSaleTieredPriceList[0] &&
                  item.onSaleTieredPriceList[0].priceFloor > 0 &&
                  item.onSaleTieredPriceList[0].priceCeil > 0
              ">
              券后 {{ "¥" + item.onSaleTieredPriceList[0].priceFloor }}-{{
                "¥" + item.onSaleTieredPriceList[0].priceCeil
              }}
            </div>
            <div class="couponAfterPrice" v-if="
                item.sellingPrice != -1 &&
                  item.onSaleTieredPriceList[0] &&
                  item.onSaleTieredPriceList[0].priceFloor == 0 &&
                  item.onSaleTieredPriceList[0].priceCeil > 0
              ">
              券后{{ "¥" + item.onSaleTieredPriceList[0].priceCeil }}
            </div>
          </div> -->
        </div>
      </div>
      <div class="null_goods" v-if="this.dataSoures.length == 0">
        <img src="https://image.hezongyy.com/pcimage/119h5/07.png" />
        <!-- <div class="text">暂无活动商品~</div> -->
      </div>
    </van-list>
  </div>
</template>
<script>
import { getRequest } from "@/api/indexGet";
import { postRequest } from "@/api/index";
import url from "@/axios/apiUrl";
export default {
  props: {
    dataSoures: {
      default: [],
    },
    type: false,
    finished: {
      type: [Boolean],
      default: false,
    },
    loading: {
      type: [Boolean],
      default: false,
    },
    type: {
      type: [String],
      default: "",
    },
    isPreview: {
      type: [Boolean],
      default: false,
    },
    is119: {
      type: [Boolean],
      default: false,
    },
  },
  data() {
    return {
      priceNode: "",
    };
  },
  created() {},
  mounted() {},
  methods: {
    //阶梯价跳转原生详情页面
    goToDetail(item) {
      window.location.href =
        this.pathURL + "nativeApp/goodsDetails?id=" + item.id + "&title=详情";
    },
    //是否显示卷后价
    // showCouponPrice(value) {
    //   if (typeof value == "number") {
    //     if (value == 0) {
    //       return "价格定制中";
    //     } else if (value == -1) {
    //       return "价格加盟可见";
    //     } else {
    //       return "卷后￥" + value.toFixed(2);
    //     }
    //   }
    // },
    load() {
      this.$emit("load");
    },
    showCards(item) {
      this.$emit("showCards", item);
    },
    //采集是否换购显示的图片
    //集采标识显示
    getLabelImg(labelId) {
      if (labelId == 21)
        return "https://image.hezongyy.com/pcimage/119h5/h5_cj_new.png";
      if (labelId == 8)
        return "https://image.hezongyy.com/pcimage/119h5/h5_jm_new.png";
      if (labelId == 6)
        return "https://image.hezongyy.com/pcimage/119h5/h5_jp_new.png";
      if (labelId == 24)
        return "https://image.hezongyy.com/pcimage/119h5/h5_yx_new.png";
    },
    getSellingPrice(value) {
      let splitPrice = String(value).split(".");
      if (value == "加盟可见") {
        return `<span style="font-size:16px;position: relative;bottom: 2px;">加盟可见</span>`;
      }
      if (!splitPrice[1]) {
        return splitPrice[0];
      } else {
        return `${splitPrice[0]}<span style="font-size:10px;">.${splitPrice[1]}</span>`;
      }
    },
  },
  watch: {
    dataSoures(newVal) {
      this.dataSoures = newVal;
      this.dataSoures.map((obj) => {
        if (obj.label.find((e) => e.id == 17)) {
          this.$set(obj, "isSwap", 17);
        }
        if (obj.label.find((e) => e.id == 4)) {
          this.$set(obj, "isSwap", 4);
        }
        /* 
          1.阶梯价获取最高阶梯的券后约和售价
          2.商品服务的外层阶梯价券后已处理,活动服务需自己获取阶梯价券后
          3.tieredPricingList：商品服务的阶梯价列表，tieredPricingRules:阶梯价专区的阶梯价列表
        */
        // if (obj.tieredPricingRules) {
        //   this.$set(obj, "tieredPricingList", obj.tieredPricingRules);
        //   if (obj.tieredPricingRules.length != 0) {
        //     this.$set(obj, "priceFloor", obj.tieredPricingList[0].priceFloor);
        //     this.$set(obj, "priceCeil", obj.tieredPricingList[0].priceCeil);
        //   }
        // } else if (!obj.tieredPricingRules && !obj.tieredPricingList) {
        //   this.$set(obj, "tieredPricingList", []);
        // }
        // if (obj.goodsPriceStruct) {
        //   this.$set(
        //     obj,
        //     "ordinaryRestrictType",
        //     obj.goodsPriceStruct.ordinaryRestrictType
        //   );
        // }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.couponAfterPrice1 {
  text-align: center;
  width: 305px;
  opacity: 1;
  color: #fff;
  padding: 2px 0;
  overflow: hidden;
  font-family: PingFangSC, PingFangSC-Regular;
  margin-top: 10px;
  line-height: 36px;
  height: 36px;
  font-size: 24px;
  background: linear-gradient(145deg, #d211d2 0%, #6c29e8 100%);
  border-radius: 30px;
}
.couponAfterPrice {
  text-align: center;
  width: 305px;
  height: 36px;
  line-height: 36px;
  opacity: 1;
  background: #ff540d;
  border-radius: 22px;
  color: #fff;
  padding: 2px 0;
  overflow: hidden;
  font-family: PingFangSC, PingFangSC-Regular;
  margin-top: 5px;
}
/deep/.van-list__finished-text {
  color: #fff;
}

.label_img {
  display: table-cell;
  width: 48px;
  height: 37px;
  line-height: 37px;
  padding-right: 16px;
  .img1 {
    width: 100%;
    height: 100%;
  }
  .img2 {
    width: 106px;
    height: 100%;
  }
}

.ladder_goods_area {
  width: 100%;
  height: calc(100vh - 170px);
  opacity: 1;
  // background: #ffffff;
  overflow: auto;
  box-sizing: border-box;
  .van_list {
    height: 100%;
  }

  .item_block {
    position: relative;
    display: flex;
    margin: 0 24px;
    margin-bottom: 20px;
    border-bottom: 1px solid #f1f1f1;
    height: 380px;
    background: #ffffff;
    border-radius: 22px;
    z-index: 1;
    .box_price {
      position: absolute;
      bottom: 50px;
      left: 10px;
      width: 140px;
      height: 58px;
      font-family: PingFang SC, PingFang SC-Semibold;
      font-weight: 600;
      color: #ffffff;
      z-index: 4;
      text-align: center;
      white-space: nowrap;
      .tip {
        display: inline-block;
        font-size: 20px;
        width: 8px;
        padding-top: 2px;
        z-index: 9;
        vertical-align: top;
      }
      .price {
        position: relative;
        font-size: 38px;
        height: 100%;
        overflow: hidden;
        display: inline-block;
        text-align: left;
      }
    }
    .box {
      position: relative;
      z-index: 3;
      width: 190px;
      height: 190px;
      margin: 20px 30px 60px 10px;
      overflow: hidden;
      .advertTag {
        position: absolute;
        width: 68px;
        height: 78px;
        top: 0.08rem;
        right: 0.12rem;
        img {
          width: 68px;
          height: 78px;
        }
      }
      img {
        width: 2.42rem;
        height: 0.68rem;
        position: absolute;
        bottom: 0;
        left: 0;
      }
      .box_price1 {
        position: absolute;
        bottom: -8px;
        left: 1px;
        width: 2.4rem;
        height: 58px;
        font-family: PingFang SC, PingFang SC-Semibold;
        font-weight: 600;
        display: flex;
        color: #ffffff;
        z-index: 99;
        white-space: nowrap;
        .tip {
          display: inline-block;
          font-size: 20px;
          width: 8px;
          padding-top: 2px;
          z-index: 9;
          vertical-align: top;
        }
        .price {
          position: relative;
          font-size: 38px;
          height: 100%;
          overflow: hidden;
          display: inline-block;
          text-align: left;
        }
        .boxPrice1Left {
          display: flex;
          flex-direction: column;
          width: 0.85rem;
          justify-content: center;
        }

        .boxPrice1Right {
          width: 1.533333rem;
          height: 0.473333rem;
          margin-top: 0.2rem;
          text-align: left;
          box-sizing: border-box;
          line-height: 0.473333rem;
        }
      }
    }
    .left {
      margin: 10px;
      display: inline-block;
      height: 2.433333rem;
      width: 2.433333rem;
      opacity: 1;
      border-radius: 8px;
      position: absolute;
      flex: 1;
      z-index: 2;
      .jiaG {
        margin-left: 0.3rem;
        font-size: 0.24rem;
        color: #666666;
      }
      .tip {
        z-index: 9;
        position: absolute;
        width: 130px;
        height: 130px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        img {
          border: none;
          display: inline-block;
          width: 100%;
          height: 100%;
        }
      }

      img {
        margin-top: 15px;
        width: 100%;
        height: 100%;
      }
    }

    .right {
      margin: 20px 0 20px 0;
      width: 59%;
      height: 280px;
      position: relative;
      .tag {
        font-size: 0.318333rem;
        height: 32px;
        line-height: 32px;
        display: inline-block;
        color: #f34444;
        padding: 0 12px;
        border-radius: 16px;
        margin-top: 4px 0;
        margin-right: 5px;
        border: 1px solid #f34444;
      }
      .tagR {
        font-size: 0.318333rem;
        height: 32px;
        line-height: 32px;
        display: inline-block;
        color: #2bbba1;
        padding: 0 12px;
        border-radius: 16px;
        margin-right: 5px;
        border: 1px solid #2bbba1;
      }
      .text1 {
        display: flex;
        align-items: center;

        opacity: 1;
        line-height: 50px;
        height: 42px;
        font-size: 32px;
        font-family: Microsoft YaHei, Microsoft YaHei-Bold;
        font-weight: 700;
        text-align: LEFT;
        padding-bottom: 6px;

        color: #333333;
        .nameTge {
          display: inline-block;
          width: 40px;
          height: 32px;
          font-size: 0.24rem;
          line-height: 36px;
          text-align: center;
          color: #fff;
          background: #2bbba1;
          border-radius: 8px;
          margin-right: 4px;
        }
        .rightName {
          display: inline-block;
          width: 4rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .text2 {
        padding-bottom: 3px;
        overflow: hidden;
        opacity: 1;
        line-height: 34px;
        height: 34px;
        font-size: 26px;
        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
        font-weight: 400;
        text-align: LEFT;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #666666;
      }

      .text31 {
        width: 100%;
        // height: 37px;
        // line-height: 37px;
        margin-top: 0px;
        // display: flex;
        // flex-wrap: wrap;
        // justify-content: space-between;
        .font12 {
          font-size: 12px;
        }
        .num {
          height: 40px;
          line-height: 40px;
          font-size: 12px;
          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
          font-weight: 400;
          text-align: LEFT;
          color: #f34444;
          margin-right: 0.066667rem;
        }
        .teNum {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          // span {
          //   flex: 1;
          // }
          .dolTeg {
            font-size: 20px;
          }
        }
        .num1 {
          // flex: 1;
          margin-right: 10px;
          height: 40px;
          line-height: 40px;
          font-size: 16px;
          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
          font-weight: 400;
          text-align: LEFT;
          color: #f34444;
        }
        .num2 {
          margin-right: 10px;
          height: 0.466667rem;
          display: inline-block;
          // align-items: center;
          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
          font-weight: 400;
          text-align: LEFT;
          background-color: #fff1d9;
          color: #333;
          padding: 0 8px;
          border-radius: 8px;
          margin-bottom: 10px;
          img {
            width: 0.453333rem;
            height: 0.266667rem;
            // vertical-align: middle;
          }
        }
        .num3 {
          margin-left: 10px;
          // margin-top: 0.106667rem;
          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
          font-weight: 400;
          text-decoration: line-through;
          color: #666666;
        }
        .num5 {
          margin-left: 10px;
          // margin-top: 0.106667rem;
          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
          font-weight: 400;
          color: #f34444;
        }
        .num4 {
          margin-right: 10px;
          width: 340px;
          display: inline-block;
          height: 0.5rem;
          line-height: 0.5rem;
          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
          font-weight: 400;
          color: #fff;
          display: flex;
          .priceBtmLeft {
            width: 60px;
            text-align: center;
            background-color: #00c595;
            border: 1px solid #00c495;
            color: #fff;
            font-size: 0.24rem;
            border-radius: 4px 0 0 4px;
          }
          .priceBtmRight {
            color: #00c595;
            width: 280px;
            border: 1px solid #00c495;
            border-radius: 0 4px 4px 0;
            display: flex;
            justify-content: space-between;
            font-size: 0.24rem;
            align-items: center;
            .priceBtmSpanRight {
              margin-right: 3px;
            }
          }
        }

        .btn {
          position: absolute;
          right: -40px;
          bottom: -50px;
          display: inline-block;
          height: 60px;
          width: 60px;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .text3 {
        height: 37px;
        line-height: 37px;
        margin-top: 10px;
        .num {
          height: 35px;
          line-height: 35px;
          width: auto;
          opacity: 1;
          font-size: 32px;
          font-family: PingFang, PingFang-Medium;
          font-weight: 500;
          text-align: left;
          color: #f34444;
          padding-right: 15px;
        }

        .num1 {
          width: auto;
          opacity: 1;
          font-size: 26px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-decoration: line-through;
          text-align: left;
          color: #999999;
          height: 37px;
          line-height: 37px;
        }

        .btn {
          position: absolute;
          right: 20px;
          bottom: -30px;
          display: inline-block;
          height: 60px;
          width: 60px;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
.null_goods {
  position: relative;
  // top: 50%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 426px;
  height: 399px;

  img {
    width: 100%;
    height: 100%;
  }

  .text {
    width: auto;
    height: 39px;
    opacity: 1;
    font-size: 28px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: CENTER;
    color: #000000;
  }
}
.font8 {
  font-size: 0.24rem;
  transform: scale(0.65);
}
.font12 {
  font-size: 0.24rem !important;
  transform: scale(0.9);
}
.fonts12 {
  font-size: 0.24rem;
}
.font13 {
  font-size: 0.313333rem;
}
.font14 {
  font-size: 0.35rem;
}

.font16 {
  font-size: 0.4rem !important;
}
.fw600 {
  font-weight: 600;
}
.fw500 {
  font-weight: 500;
}
.font16-w {
  font-size: 0.4rem !important;
  font-weight: 600 !important;
}
.font16w {
  font-size: 0.4rem !important;
  font-weight: 600 !important;
}
.flex-c {
  display: flex;
  align-items: flex-start;
}
.flex-item {
  display: flex;
  align-items: center;
}
.color666 {
  color: #666;
}
.color333{
  color: #333;
}
.tex {
  text-align: center;
}
.vipFlex {
  display: flex;
  // align-items: center;
}
.colorf34 {
  color: #f34444 ;
}
</style>
